<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>呼吸灯</title>
	<style type="text/css">
	    div{
	    	box-sizing: border-box;
	    }
		.content{
			width: 380px;
			height: 600px;
			background-color: #333;
			margin:0 auto;
		}
		.box{
			height: 380px;
			/*background-color: teal;*/
			padding: 40px;
			animation-name: outer;
			animation-duration:5s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}
		.outer{
			height: 100%;
			border:5px solid #ccc;
			border-radius: 50%;
			padding: 20px;
			animation-name: inner;
			animation-duration:5s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
			
		}
		.inner{
			height: 100%;
			border:10px solid #ffffff;
			border-radius: 50%;
		}
		@keyframes outer{
			25%{
				padding: 30px;
			}
			50%{
				padding: 40px;
			}
		}
		@keyframes inner{
			25%{
				padding: 30px
			}
			50%{
				padding: 20px;
			}
			75%{
				padding: 32px;
			}
			100%{
				padding: 20px;
			}
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="box">
			<div class="outer">
				<div class="inner"></div>
			</div>
		</div>
	</div>
</body>
</html>